<template id="collage_coach">
	<div class="collage_coach">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link :to="{path:'/collage_class',query:{gym_id:coach.gym_id}}">
					<img src="../../assets/images/collage/collage_coach_jian_03.png"/>
				</router-link>

			

			</div>
			<p>{{coach.class_name}}</p>
			<div class="about_nav">
				<ul>
					<li><p>课程</p><div class="about_li"><span>1</span><font>节</font></div></li>
					<li><p>时间</p><div class="about_li"><span>{{coach.durable}}</span><font>分钟</font></div></li>
					<li><p>难度</p><div class="about_li"><span>{{coach.level}}</span><font>星</font></div></li>
				</ul>
			</div>
		
		<div class="about_present" @click.stop = 'collagePresent(coach.id)'>
			<button>课程介绍</button>
		</div>
		
		
		</div>
		<!--头部结束-->
		
		<!--价格-->
		<div class="collage_money">
			<div class="collage_price">
				<span v-if="price=='0'">￥{{coach.price}}/</span>
				<span v-else>￥{{coach.vip_price}}/</span>
				<font>人</font></div>
		</div>
		<!--价格结束-->
		<!--会员下单-->
		<div class="collage_insider">
			<div class="insider_left">
				<div class="insider_top">
					<div class="insider_self"><i>VIP</i><span>专享</span></div>
					<p>会员下单预计可节省<font>76</font>元</p>
				</div>
				<div class="insider_bottom">会员卡立享4折优惠</div>
			</div>
			<div class="insider_right" @click.stop="collageMember(coach.id)">
				<span>开通会员</span>
				<img src="../../assets/images/my_order/my_order_07.png" alt="" />
			</div>
		</div>
		<!--会员下单结束-->
		
		<!--教练信息-->
		<div class="coach_info">
			<div class="coach_most">


				
				

				<!-- 还可预约/课程时间/场馆地点-->
				<div class="coach_address">
			<div class="coach_vail">
			<div class="coach_init">
				<div class="coach_left">
					<p class="coach_left_one">已经有<span>{{people}}</span>人预约</p>
				   <p class="coach_left_two">满4人开课</p>
				</div>
				<div class="coach_center">
					<div class="redimg" v-for="(item,index) in data" :key="index">
						<img style="width:30px;height:30px;border-radius:50%;" v-lazy="item.head_image" alt="">
					</div>
				</div>
				<div @click="yqhy()" class="coach_right">
	<span>+</span></div>
				<span class="invite">邀请好友</span>
			</div>
		</div>
					<div class="coach_each">
						<p>还可预约：{{coach.max_people -coach.success_people}}人</p><span>满4人开课</span></div>
					<div class="coach_data">
						<p>课程时间：<span>{{coach.action_time | formatDate}}</span></p>&nbsp;至 &nbsp;<span>{{coach.action_time+(coach.durable*60*1000) | format}}</span></div>
					<div class="coach_place">
						<p>场馆地点：{{coach.gym_address}}</p>
					</div>
				</div>
				<!-- 还可预约/课程时间/场馆地点结束-->

			</div>
		</div>

		<!--教练信息结束-->

		<!--教练介绍-->
		<!--<div class="coach_suggest">
			<div class="coach_hour">
				<p class="coach_meather">教练介绍</p>
				<div class="coach_funny">
					<p :class="isOverFlow ? 'isOverFlow' : ''">{{brief}}</p>
				</div>
				<div class="coach_launch">
					<div class="launch_left" @click.stop="textAllIsShow"><span>展开</span><img src="../../assets/images/collage/deploy.png" /></div>
					<div class="launch_right" @click.stop="textAllIsHide"><span>收起</span><img src="../../assets/images/collage/stop.png" /></div>
				</div>

			</div>

		</div>
		-->
			
		<!--教练介绍结束-->

		<!--姓名、手机号、预约人数、备注-->

		<div class="coach_oppo">
			<div class="coach_name"><span>姓名：</span><input type="text" v-model="username" /></div>

			<div class="coach_name"><span>手机号：</span><input type="text" v-model="phone" /></div>
			<!--oninput="if(Number(value) > 4) value = 12"-->
			<div class="coach_name"><span>预约人数：</span>
				<input type="number" v-model="number" @change="numberChange($event)" /></div>
			<!--备注-->
			<div class="coach_remark">
				<span>备注：</span>
				<textarea type="text" placeholder="若多人上课时请填写课程备注" v-model="textarea" @change="nameChange($event)"></textarea>
			</div>
			<!--备注结束-->
		</div>
		<!--姓名、手机号、预约人数、备注结束-->

		<!-- 底部结算-->
		<div class="coach_foot">
			<div class="coach_foot_left">
				<p>您已预约<span>{{number}}</span>人</p>
			</div>
			<div class="coach_foot_right" @click.stop="coachClass(coach.id,coach.price,coach.vip_price)">
				<p>预约课程</p>
			</div>
		</div>
		<!-- 底部结算结束-->
		<div v-if="seen" style="background: #0c0c0b;
    opacity: 0.5;
    position: absolute;
    top: 12px;
    width: 100%;
    height: 150%;">
			<img style="width: 58%;
    padding-top: 9%;
    margin-left: 30%;" src="../../assets/images/56425231986450756.png" alt="">
			<img  @click="gb()" style="    margin-left: 24%;
    padding-top: 43%;
    width: 50%;"  src="../../assets/images/129915656331208272.png" alt="">
		</div>
		<!-- <div style="background: rgb(12, 12, 11);
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 29.5%;
    bottom: -31%;">

		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
//				isOverFlow: true,
				coach: [],
				brief: '',
				username: '',
				phone: '',
				textarea: '',
				value1: 2,
				number: 4,
				id: '',
				price:'',
				vip_price:'',
				bookingid:'',
				seen:false,
				data:'',
				people:'1',
			}
		},
		computed: {

		},
		components: {},
		created() {
			let _this = this
			let qs = require('qs');
			var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
			let obj = {
				//请求的参数
				id: _this.$route.query.id,

			};
			if(SESSION_ID!=null){
				_this.username = SESSION_ID.user.username
				_this.phone = SESSION_ID.user.phone
				let obj1 = {
					//请求的参数
					userid:SESSION_ID.user.id,

				};
				_this.$axios.post("/yujiaextend/vip/findUserIsVip", qs.stringify(obj1), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}

				}).then(function(response) {
					// console.log(response.data.code)
					_this.price = response.data.code

				}).catch(function(error) {
					console.log(error);
				});
			}else{
				_this.price = 0;
			}

			_this.$axios.post("/yujiaextend/user/findGymActionById", qs.stringify(obj), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}

			}).then(function(response) {
				_this.coach = response.data.data
				_this.id = response.data.data.id
				// console.log(response.data.code)
				// _this.price = response.data.code
				_this.people=response.data.data.success_people
				_this.brief = decodeURI(response.data.data.brief)

			}).catch(function(error) {
				console.log(error);
			});

		},
		filters: {
			formatDate: function(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			},
			format: function(value) {
				let date = new Date(value);
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				return h + ':' + m;
			}
		},
		mounted() {	
			// alert(1)		
			this.ajax()
			var url = "http://yogahome.shop/ygweb/collage_coach?gym_id&id";
		
			setTimeout(()=>{
				   $.post("http://yogahome.shop/yujiaextend/coach/wxcoachshare"), {
                "url": url
            }, function (data) {
                console.log(data);
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.data.appid, // 必填，公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                    signature: data.data.signature,// 必填，签名
                    jsApiList: [
                        "updateAppMessageShareData",
                        "updateTimelineShareData",
                        "onMenuShareWeibo",
                        "onMenuShareTimeline",
                        "onMenuShareAppMessage",
                        "onMenuShareQQ",
                        "onMenuShareQZone"
                    ] // 必填，需要使用的JS接口列表
                });
                wx.ready(function () {
                    //2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                    wx.onMenuShareAppMessage({
                        title: '道歉声明！@所有懒得出门练瑜伽的人！', // 分享标题
                        desc: '还不快“点”个专属教练带你练！', // 分享描述
                        link: url, // 分享链接
                        imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
                        type: 'link', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            alert('分享成功');// 用户确认分享后执行的回调函数,
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
    
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                })
                wx.ready(function () {
                    wx.onMenuShareTimeline({
                        title: '道歉声明！@所有懒得出门练瑜伽的人！', // 分享标题
                        link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
                        success: function () {
                            alert('分享成功')
                        },
                    });
                })
                wx.ready(function () {
                    wx.onMenuShareQQ({
                        title: '道歉声明！@所有懒得出门练瑜伽的人！', // 分享标题
                        desc: '还不快“点”个专属教练带你练！', // 分享描述
                        link: url, // 分享链接
                        imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
                        success: function () {
    // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
    // 用户取消分享后执行的回调函数
                        }
                    });
                })
                wx.ready(function () {
                    wx.onMenuShareQZone({
                        title: '道歉声明！@所有懒得出门练瑜伽的人！', // 分享标题
                        desc: '还不快“点”个专属教练带你练！', // 分享描述
                        link: url, // 分享链接
                        imgUrl: 'http://yogahome.top/evaluateImages/logol.png', // 分享图标
                        success: function () {
    // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
    // 用户取消分享后执行的回调函数
                        }
                    });
                })
        }
			})
		},
		methods: {
			gb(){
				this.seen=false
			},
			ajax(){
				let _this = this
				let qs = require('qs');
				var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
				let obj = {
					//请求的参数
					gymActionId : _this.$route.query.id,

				};

				_this.$axios.post("/yujiaextend/yogagym/findActionUserByActionId", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.data=response.data.data
				}).catch(function(error) {
					console.log(error);
				});

			},
			yqhy(){
			   setTimeout(()=>{
				 this.seen=true
			   })
			},
//			textAllIsShow() {
//				this.isOverFlow = false;
//			},
//			textAllIsHide() {
//				this.isOverFlow = true;
//			},
			nameChange(e) {
				this.textarea = e.target.value;
				console.log(this.textarea)
			},
//			inputChange(e) {
//				if(this.number < 4){
//					mui.alert('4人才开课')
//				} else if(this.number = 4) {
//					this.number = 4;
//
//				}else if(this.number > 12) {
//				this.number = 12;
//				}
//			},
			numberChange(e) {
				for(var i = 0; i < this.number.length[i]; i++) {
					console.log(this.number.length[i])
				}
				
				//   console.log(this.number)
			},
			coachClass(id,price,vip_price) {
				let _this = this
				let qs = require('qs');
				var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
				if(SESSION_ID==null){
					mui.alert('请登录')
			 			_this.$router.push({
			 			path: "/forgot_password",
			 			query:{
			 				collage_coach:'collage_coach2'
			 			}
			 		})
				}
				let obj = {
					//请求的参数
					people: _this.number,
					userid: SESSION_ID.user.id,
					remark: _this.textarea,
					gymActionId: _this.id,

				};
				
				_this.$axios.post("/yujiaextend/yogagym/insertInYogaGymUser", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					_this.bookingid = response.data.data.booking_id
						if(response.data.code == '1') {
						// mui.alert(response.data.message)
					} else if(response.data.code == '0') {
						mui.alert(response.data.message)
					} else if(response.data.code == '-2') {
						mui.alert(response.data.message)
					} else if(response.data.code == '-3') {
						mui.alert(response.data.message)
					} else if(response.data.code == '-4') {
						mui.alert(response.data.message)
					} else if(response.data.code == '-5') {
						mui.alert(response.data.message)
					}
                        _this.$router.push({		
						path: "/collage_pay",
						query: {
                            bookingid:_this.bookingid,
							id,
							price,
							vip_price,
							yuan: 0,
							couponid: 0,
							number: _this.number
						}
					})
				    if(SESSION_ID == null){
						mui.alert("请登录")
						_this.$router.push({
							path: "/forfot_password",
							query: {}
						})
						return;
					}
								
					
				let obj1 = {
					//请求的参数					
					bookingid:_this.bookingid,

				};
					
					_this.$axios.post("/yujiaextend/user/findYogaUserByBookingId", qs.stringify(obj1), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					// console.log(_this.bookingid)
					if(response.data.code == '0') {
						mui.alert(response.data.message)
					} 
					

				})

				}).catch(function(error) {
					console.log(error);
				});
				let obj2 = {
					//请求的参数					
					userid:SESSION_ID.user.id,

				};
				_this.$axios.post("/yujiaextend/vip/findUserIsVip", qs.stringify(obj2), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}

			}).then(function(response) {
				// console.log(response.data.code)
				_this.price = response.data.code
				// console.log(_this.price)

			}).catch(function(error) {
				console.log(error);
			});
				
				
			},
			collagePresent(id){
				this.$router.push({
					path:'/collage_present',
					query:{
						id,
					}
				})
			},
			collageMember(id){ 
				let _this = this
			let qs = require('qs');
			var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
			let obj = {
				//请求的参数
				userid: SESSION_ID.user.id,

			};

			_this.$axios.post("/yujiaextend/vip/findUserIsVip", qs.stringify(obj), {
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				}

			}).then(function(response) {
				
                if(SESSION_ID == null) {
						mui.alert("请登录")
						_this.$router.push({
							path: "/forfot_password",
							query: {}
						})
						return;
					}		
				
				if(response.data.code == '0'){
					mui.alert(response.data.message)
				}else if(response.data.code == '1'){
					mui.alert(response.data.message)
					_this.$router.push({
					path:'/collage_member',
					query:{
						id,
					}
				})
				}else if(response.data.code =='-1'){
					mui.alert(response.data.message)
				}

			}).catch(function(error) {
				console.log(error);
			});
				
				
			}
		}

	}
</script>

<style scoped>
	@import "../../assets/css/collage_coach.css";
</style>
<style>
	.collage_xing .el-rate__item {
		width: 14px;
		margin-top: 2px;
		margin-left: 3px;
	}
	
	.collage_xing .el-rate__icon {
		font-size: 14px;
	}
	
	.el-rate__icon .el-icon-star-on:before {
		width: 14px;
		height: 14px;
	}
	
	.yans{
  
}

</style>